<template>
  <div>
    <div class="header-btn">
      <div>动态详情</div>
      <div>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <!-- 基础信息 -->
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header">基础信息</div>
      <el-form label-width="120px" label-position="right" style="position: relative">
        <el-form-item label="同步动态员工：" prop="activeStaff">
          <el-tag :key="item.userId" v-for="item in tagArr">{{ item.userName }}</el-tag>
        </el-form-item>
        <el-form-item label="选择客户：" prop="chooseCustomer">
          <span>{{ ['', '全部客户', '筛选客户'][checkUser] }}</span>
        </el-form-item>
        <el-form-item label="客户标签：" prop="customerSegment" v-if="checkUser == 2">
          <el-tag v-for="(item, index) in det.customerTag" :key="index">{{item}}</el-tag>
        </el-form-item>
      </el-form>
    </div>
    <!-- 动态内容 -->
    <div class="wrap g-card">
      <div class="title-header">动态内容</div>
      <el-form ref="form11" :model="form11" label-width="120px" label-position="right" style="position: relative">
        <el-form-item label="文本：" prop="text">
          {{form11.textarea}}
        </el-form-item>
        <el-form-item v-if="form11.contentDetails.length > 0" label="素材：" prop="source">
          <NormalSelectMaterial v-if="operateFlag" :disabled="true" :selectedList="form11.contentDetails" />
        </el-form-item>
        <el-form-item v-if="editCodeInfo.activityName" label="二维码：" prop="qrcode">
          <div class="seletedCode">
            {{ `${editCodeInfo.qrType == 1 || !editCodeInfo.qrType ? "员工活码" : editCodeInfo.qrType == 2 ? "渠道活码" : "群活码"} : ${editCodeInfo.activityName}` }}
          </div>
        </el-form-item>
        <el-form-item label="发送类型：" prop="sendType">
          {{ form11.sendType }}
        </el-form-item>
      </el-form>
    </div>
    <!-- 可见客户范围 -->
    <div class="wrap g-card" style="margin-bottom: 20px" v-if="checkUser == 2">
      <div class="title-header">可见客户范围</div>
      <div class="dialog-wrap">
        <el-input v-model="customerName" placeholder="请搜索客户" clearable suffix-icon="el-icon-search" @blur="queryCustomerMsg" style="width: 250px; margin-left: 20px"></el-input>
        <el-cascader :options="tagCanLookOptions" v-model="followStatus" style="margin-left: 20px" @change="queryCustomerMsg" placeholder="请选择标签" clearable></el-cascader>
        <el-select v-model="sendStatus" clearable placeholder="请选择发送状态" class="header-search-select" @change="queryCustomerMsg" @remove-tag="queryCustomerMsg"
          style="margin-left: 20px">
          <el-option v-for="item in sendStatusList" :key="item.id" :value="item.id" :label="item.value" />
        </el-select>
      </div>
      <div style="padding: 20px">
        <el-table v-loading="loading" :data="customerList" style="width: 100%" height="415">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="姓名" align="center" prop="name" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span style="color: #082aff"> {{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手机" prop="phone" show-overflow-tooltip></el-table-column>
          <el-table-column label="邮箱" align="center" prop="email" show-overflow-tooltip />
          <el-table-column label="微信号" align="center" prop="wechat" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="微信名称" align="center" prop="wechatName" show-overflow-tooltip></el-table-column>
          <el-table-column label="性别" align="center" prop="sex" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <div v-for="item in userSex" :key="item.dictValue">
                <span v-if="row.gender === item.dictValue">{{
                  item.dictLabel
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="标签" align="center" prop="tagName" show-overflow-tooltip></el-table-column>
          <el-table-column label="跟进阶段" align="center" prop="trackTag" show-overflow-tooltip></el-table-column>
        </el-table>
        <NormalPagination :currentPage="pageNum" :pageSize="pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
    </div>
  </div>
</template>

<script>
import { checkOrUpdateTask, querywetaggroup, querywetaglist, querywetaggroupsmall } from '../../../api/communityOperating/enterpriseCircle'

export default {
  name: 'detail',
  data() {
    return {
      operateFlag: '',
      noshow: false,
      pageNum: 1,
      pageSize: 20,
      customerName: '',
      followStatus: '',
      sendStatus: '',
      checkUser: 1,
      loading: false, // 新增员工弹窗
      customerList: [], // 新增客户数据
      followStatusList: [], // 跟进阶段
      sendStatusList: [
        {
          id: 1,
          value: '成功',
        },
        {
          id: 2,
          value: '失败',
        },
      ],
      total: 0,
      form11: {
        type: '',
        name: '',
        textarea: '',
        codeStatus: '无',
        sendType: '',
        contentDetails: [],
      },
      userSex: [], // 性别
      fileList: [],
      weekList: [], // 周期提醒
      moId: '',
      tagArr: [],
      tagOptions: [],
      det: {
        customerTag: '',
      },
      tagCanLookOptions: [],
      editCodeInfo: {},
      codeInfo: {},
    }
  },
  created() {
    // 性别
    this.getDicts('sys_user_sex').then((res) => {
      if (res.code === 200) {
        this.userSex = res.data
      }
    })
    // 跟进阶段
    this.getDicts('sys_customer_trackState').then((res) => {
      if (res.code === 200) {
        this.followStatusList = res.data
      }
    })
    querywetaggroup({}).then((res) => {
      this.tagOptions = res.data.children
    })
  },
  mounted() {
    this.checkOrUpdateTask()
    this.querywetaggroupsmall()
  },
  methods: {
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.queryCustomerMsg()
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryCustomerMsg()
    },
    //查询可见客户标签枚举值
    querywetaggroupsmall() {
      if (this.$route.query.rowContent.moId) {
        this.moId = this.$route.query.rowContent.moId
      }
      querywetaggroupsmall({ code: this.moId || '' })
        .then((res) => {
          this.tagCanLookOptions = res.data.children
        })
        .catch(() => {})
    },
    // 初始化查询
    checkOrUpdateTask() {
      // 路由跳转带来得参数信息
      if (this.$route.query.rowContent.moId) {
        this.moId = this.$route.query.rowContent.moId
      }

      if (this.moId) {
        checkOrUpdateTask({ moId: this.moId }).then((res) => {
          if (res.code === 200) {
            this.form11.textarea = res.data.content
            this.form11.sendType = res.data.flagTime === '1' ? '立即发送' : '定时发送'
            this.form11.contentDetails = res.data.contentDetail || []
            if (res.data.customerArr === '1') {
              this.checkUser = 1
            } else {
              this.checkUser = 2
              this.det.customerTag = res.data.customerArr.split(',')
              this.queryCustomerMsg()
            }
            this.tagArr = res.data.synEmplist
            if (res.data.desCusList) {
              this.total = res.data.desCusList ? res.data.desCusList.length : 0
              this.customerList = res.data.desCusList || []
            }
            if (res.data.qrWemoment) {
              this.editCodeInfo = res.data.qrWemoment[0]
            }
            this.operateFlag = 'DETAIL'
          }
        })
      }
    },
    // 返回
    goBack() {
      this.$router.go(-1)
    },
    // 搜索跟进进度
    queryCustomerMsg() {
      let cus = ''
      if (this.followStatus) cus = this.followStatus[1]
      let obj = {
        name: this.customerName,
        trackTag: cus,
        sucessFlag: this.sendStatus,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        moId: this.$route.query.rowContent.moId || '',
      }
      querywetaglist(obj).then((res) => {
        if (res.code === 200 && res.data) {
          this.customerList = res.data.weTagInfoList
          this.total = Number(res.data.total)
        }
      })
    },
  },
}
</script>

<style lang='scss' scoped>
@import '../../../styles/base.scss';
.header-btn {
  @include headerBtn;
}
.wrap {
  @include titleWrap;
}
.dialog-wrap {
  display: flex;
  justify-content: flex-start;
}
</style>
